<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/nav-footer.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .search-Area{
            padding: 20px 0px;
            background-color: #f0f3f5;
        }
        .search-input{
            padding: 0 15px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            width:450px;
            height: 40px;
        }
        .search-input:focus{
            outline: none;
        }
        .search-button{
            margin: 0;
            padding: 0;
            height:40px;
            width:80px;
            outline: none;
            border: 0;
            background-color: #3399ea;
            color: white;
            transition: all .5s cubic-bezier(.645,.045,.355,1);
            border-radius: 5px;
        }
        .search-button:focus{
            outline: none;
        }
        .search-button:hover{
            background-color: rgba(0, 131, 234, 0.68);
        }
        .search-hint{
            margin: 20px 0px 40px;
        }
        .star-list{
            padding-left: 5px;
        }
        .star-list li{
            float: left;
        }
        .star{
            width:13px;
            height:13px;
            margin: 0 1px;
        }
        .score{
            padding-top: 3px;
            margin: 0 6px;
            color: #e09015;
        }
        .search-list{
            display: flex;
            flex-direction: row;
            padding: 20px 20px;
            border-bottom: 1px solid #dddddd;
        }
        .search-img{
            width:100px;
        }
        .search-detail{
            padding-left: 30px;
            display: flex;
            flex-direction: column;
        }
        .course-name{
            font-size: 18px;
            color: #2878b7;
            padding-left: 5px;
            margin-bottom: 5px;
        }
        .course-detail{
            padding-left: 5px;
            color: gray;
            margin-bottom: 5px;
            font-size: 15px;
        }

        .course-comment{
            padding: 20px;
            background-color: #f8fbfd;
        }
        p{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<header id="navigator">
    <div class="nav-left">
        <span class="nav_name">海大优选</span>
        <span class="nav_list"><a href="index.html" >首页</a></span>
        <span class="nav_list"><a href="#">课程</a></span>
    </div>
    <div class="nav-right">
        <div id="drop-name">
            <img src="images/duck.jpg" alt="">
            <span>杨欧牟</span>
        </div>
        <div>
            <ul id="drop-list">
                <div class="line"></div>
                <li><a href="#">个人中心</a></li>
                <div class="line"></div>
                <li><a href="">退出</a></li>
            </ul>
        </div>
    </div>

</header>
<div class="search-Area">
    <div class="container">
        <div class="row">
            <div class="m-auto">
                <form action="">
                    <input type="text" class="search-input" placeholder="请输入您想搜索的课程">
                    <button type="submit" class="search-button">搜索</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="search-result">
    <div class="container">
        <div class="search-hint">
            <h2>搜索(记得添加)</h2>
        </div>
        <hr>
        <section class="search-list">
            <a href=""><img src="images/temp.jpg" alt=""class="search-img"></a>
            <div class="search-detail">
                <a href="#" class="course-name">软件工程</a>
                <ul class="star-list">
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li class="score">7</li>
                </ul>
                <span class="course-detail">老师：高峰</span>
                <span class="course-detail" >类别：专业课</span>
                <span class="course-detail">评价：</span>
                <div class="course-comment">
                    <p>软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计模式等方面。
                        在现代社会中，软件应用于多个方面。典型的软件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。同时，各个行业几乎都有计算机软件的应用，如工业、农业、银行、航空、政府部门等。这些应用促进了经济和社会的发展，也提高了工作效率和生活效率 。
                    </p>
                </div>
            </div>
        </section>
        <section class="search-list">
            <a href=""><img src="images/temp.jpg" alt=""class="search-img"></a>
            <div class="search-detail">
                <a href="#" class="course-name">软件工程</a>
                <ul class="star-list">
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li class="score">7</li>
                </ul>
                <span class="course-detail">老师：高峰</span>
                <span class="course-detail" >类别：专业课</span>
                <span class="course-detail">评价：</span>
                <div class="course-comment">
                    <p>软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计模式等方面。
                        在现代社会中，软件应用于多个方面。典型的软件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。同时，各个行业几乎都有计算机软件的应用，如工业、农业、银行、航空、政府部门等。这些应用促进了经济和社会的发展，也提高了工作效率和生活效率 。
                    </p>
                </div>
            </div>
        </section>
        <section class="search-list">
            <a href=""><img src="images/temp.jpg" alt=""class="search-img"></a>
            <div class="search-detail">
                <a href="#" class="course-name">软件工程</a>
                <ul class="star-list">
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li><img src="images/评星0.png" alt="" class="star"></li>
                    <li class="score">7</li>
                </ul>
                <span class="course-detail">老师：高峰</span>
                <span class="course-detail" >类别：专业课</span>
                <span class="course-detail">评价：</span>
                <div class="course-comment">
                    <p>软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计模式等方面。
                        在现代社会中，软件应用于多个方面。典型的软件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。同时，各个行业几乎都有计算机软件的应用，如工业、农业、银行、航空、政府部门等。这些应用促进了经济和社会的发展，也提高了工作效率和生活效率 。
                    </p>
                </div>
            </div>
        </section>
    </div>

</div>
<footer>
    <div class="line"></div>
    <div class="copyright">
        Copyright © 2019 大碗宽面 All Rights Reserved
    </div>
</footer>
<script src="js/tools.js"></script>

</body>
</html>